<template>
  <div class="pt-5 px-123 mx-auto max-h-214 overflow-y-auto overflow-x-hidden" :class="prefixCls">
    <div class="basic">
      <HFormTitle text="基础信息" class="pb-3.75 mb-3.75 title" />
      <BasicForm @register="registerForm" />
    </div>
    <div class="database mt-5">
      <HFormTitle text="数据源定义" class="pb-3.75 mb-3.75 title" />
      <BasicForm @register="registerData" />
    </div>
    <div class="database mt-5">
      <HFormTitle text="数据跟踪定义" class="pb-3.75 mb-3.75 title" />
      <BasicForm @register="registerDataFlow" />
    </div>
  </div>
</template>

<script lang="ts" setup name="BasicInfo">
  import { onMounted } from 'vue';

  import { BasicForm, useForm } from '/@/components/Form/index';
  import HFormTitle from '/@/components/HFormTitle';
  import { ModelFormConfig } from './typing';
  // import { useMessage } from '/@/hooks/web/useMessage';
  import { useDesign } from '/@/hooks/web/useDesign';
  import { basicSchemaFn, dataSchema, dataFlowSchema } from './basic.data';

  const props = withDefaults(
    defineProps<{
      data: ModelFormConfig;
      isDetail: boolean;
    }>(),
    {},
  );
  const { prefixCls } = useDesign('BasicInfo');
  // const { createMessage } = useMessage();

  const [registerForm, { resetFields, updateSchema, setFieldsValue, validate }] = useForm({
    rowProps: { gutter: 50 },
    labelWidth: 90,
    baseColProps: { lg: 12, md: 24 },
    schemas: basicSchemaFn,
    showActionButtonGroup: false,
  });

  const [registerData, { resetFields: restData, setFieldsValue: setData, validate: validData }] =
    useForm({
      rowProps: { gutter: 36 },
      labelWidth: 90,
      baseColProps: { lg: 12, md: 24 },
      schemas: dataSchema,
      showActionButtonGroup: false,
    });
  const [
    registerDataFlow,
    { resetFields: restFlow, setFieldsValue: setFlowData, validate: validFlowData },
  ] = useForm({
    rowProps: { gutter: 36 },
    labelWidth: 90,
    baseColProps: { lg: 12, md: 24 },
    schemas: dataFlowSchema,
    showActionButtonGroup: false,
  });

  onMounted(() => {
    init();
  });
  function init() {
    resetFields();
    restData();
    restFlow();
    setFieldsValue(props.data);
    setData(props.data.dataInfo);

    setFlowData(props.data.formDesignInfo.modifyLogConfig || {});
    updateSchema({
      field: 'modelCode',
      ifShow: props.isDetail,
    });
  }
  async function getBasicVal() {
    const data = await validate();
    const dataInfo = await validData();
    data.dataInfo = dataInfo;
    const modifyLogConfig = await validFlowData();
    data.modifyLogConfig = modifyLogConfig;
    data.formDesignInfo = Object.assign({}, props.data.formDesignInfo, {
      modifyLogConfig,
    });
    return data;
  }
  defineExpose({ getBasicVal });
</script>
<style lang="less" scoped></style>
